<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>VIP详情页</title>
		<link rel="stylesheet" type="text/css" href="css/vipPage.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/login.css" />
		<link rel="shortcut icon" type="image/x-icon" href="img/3.ico" media="screen" />
	</head>

	<body>

		<div class="vipPage">
			<div class="vipPage-row">
				<ul class="vipPage_row_box">

				</ul>

				<div class="vipPage_row_confirm">
					<div class="vipPage_row_confirm_title">
						<i class="vipPage_row_confirm_title_icon"></i> 使用优惠券
					</div>
					<div class="vipPage_row_confirm_coupon">
						<ul class="vipPage_row_confirm_coupon_tab">

							<div style="clear: both;"></div>
						</ul>
						<ul class="vipPage_row_confirm_coupon_table">
							<li>
								<ul class="vipPage_row_confirm_coupon_table_content">
									<li style="width: 20%;">名称</li>
									<li style="width: 20%;">面额（元）</li>
									<li style="width: 20%;">使用条件</li>
									<li style="width: 40%;">有效期</li>
								</ul>

								<div class="vipPage_row_confirm_coupon_table_btn">
									<button type="button" class="vipPage_btn_use">确认使用</button>
									<button type="button" class="vipPage_btn_unuse">不使用优惠券</button>
								</div>

							</li>
							<li style="display: none;">
								<ul class="vipPage_row_confirm_coupon_table_content">
									<li style="width: 20%;">名称</li>
									<li style="width: 20%;">面额（元）</li>
									<li style="width: 20%;">使用条件</li>
									<li style="width: 40%;">有效期</li>
								</ul>

							</li>
						</ul>

					</div>
					<div class="vipPage_row_confirm_search">
						<input type="text" id="" value="" placeholder="请输入优惠券码" />
						<button type="button">绑定优惠券</button>
					</div>
					<div class="vipPage_row_confirm_search_payinfo">
						<div class="vipPage_payinfo_word">购买即表示同意
							<a href="#4">暴风影音VIP服务协议</a>
						</div>
						<div class="vipPage_payinfo_pay">
							<span id="payall">总金额:  </span>
							<span id="pay">应付：</span>

							<button type="button" id="buynow">立即购买</button>
						</div>
					</div>

				</div>
			</div>

		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/alertLogin.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/header.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/addheader.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("body").addHeader()
				//按钮控制优惠券栏目收放
				var flag = 0
				$(".vipPage_row_confirm_title_icon").click(function() {
					if(flag === 0) {
						$(this).css("background-position", "0px -123px")
						$(".vipPage_row_confirm_coupon").css("display", "none")
						flag = 1
					} else {
						$(this).css("background-position", "0px -98px")
						$(".vipPage_row_confirm_coupon").css("display", "block")
						flag = 0
					}

				})

				//生成卡
				$.get("/viplist", function(data) {
					console.log(data)
					var totalPrice = 0
					data.forEach(function(item) {
						$(".vipPage_row_box").append(`
					     <li>
						<span class="vipPage-row-box-card">${item.type}</span>
						<span class="vipPage-row-box-movie">${item.month}</span>
						<span class="vipPage-row-box-price">${item.newPrice}
						</span>
						<em style="text-decoration: line-through;font-size: 22px;">¥${item.oldPrice}</em>
						<div class="vipPage-row-box-icon"></div>
					    </li>
				        `)

					})
				})
				//生成优惠券
				var userid = $.cookie("userId")
				var arr1 = []
				console.log(userid)
				$.get("/vipCoupon", {
					userid: userid
				}, function(data) {

					data.forEach(function(item) {

						arr1.push(item.case)
						
						$(".vipPage_row_confirm_coupon_table_content:first").after(`
								
								<ul class="vipPage_row_confirm_coupon_table_content2">
								    <input class="vipcheck" data-value='${item.value}' type="checkbox" style="width:16px;height:16px; margin-top:8px;"/>
			    					<li style="width: 20%;color:#111;">${item.name}</li>
			    					<li style="width: 20%;color:#111;" class="youhui">${item.value}（元）</li>
			    					<li style="width: 20%;color:#111;" class="case">满${item.case}可用</li>
			    					<li style="width: 40%;color:#111;">${item.time}</li>
			    				</ul>
			    				
							`)

					})
                    arr1.reverse()
					

					$(".vipPage_row_confirm_coupon_tab").prepend(`
							<li class="current">可用优惠券(${data.length})</li>
			    			<li>不可用优惠券(0)</li>
						`)

				})
				
				console.log(arr1)

				
                //复选框勾选优惠券
				$(".vipPage_row_confirm_coupon_table").on("change", ".vipcheck", function() {
					if($(this).prop("checked")) {
						var vipvalue = $(this).data('value')
						var lastv = parseInt(price) - parseInt(vipvalue)
						$("#pay").children().remove()
						$("#pay").append('<span style="color:red;font-size:20px;"> ' + lastv + '元</span>')
						console.log($(this).siblings(".vipcheck"))
						$(this).parent().siblings().find(".vipcheck").prop("checked", false)
					} else {
						$("#pay").children().remove()
						$("#pay").append(`<span style="color:red;font-size:20px;"> ${price}元</span>`)
					}

				})
				//选择卡种类,生成价格
				var price
				$(".vipPage_row_box").on("click", "li", function() {
					//$(this).children("div").toggle()
					//切换卡种类时取消优惠券的勾选状态
					$("input[type='checkbox']").prop("checked", false)
					if($(".vipPage_row_box div").css("display", "none")) {

						$(this).children("div").show()
						price = parseFloat($(this).find(".vipPage-row-box-price").text()).toFixed(2)
						$("#pay,#payall").children().empty()
						$("#payall").append(`<span style="color:red;font-size:20px;"> ${price}元</span>`)
						if($(".vipcheck").prop("checked")) {
							var vipvalue = $(".vipcheck[checked]").data('value')
							var lastv = parseInt(price) - parseInt(vipvalue)
							$("#pay").children().remove()
							$("#pay").append('<span style="color:red;font-size:20px;"> ' + lastv + '元</span>')
							console.log($(this).siblings(".vipcheck"))
							$(this).parent().siblings().find(".vipcheck").prop("checked", false)
						} else {
							$("#pay").append(`<span style="color:red;font-size:20px;"> ${price}元</span>`)
						}

						//判断优惠券是否满足使用条件
						for(i = 0; i < arr1.length; i++) {
							console.log(arr1[i])
							
							if(price < arr1[i]) {
								console.log(111)
								$("input[type='checkbox']").eq(i).prop("disabled", true)
							} else {
								$("input[type='checkbox']").eq(i).prop("disabled", false)
							}
						}

					}
				})
		
				//优惠券栏tab切换
				$(".vipPage_row_confirm_coupon_tab").on("click", "li", function() {
					$(this).addClass("current").siblings().removeClass("current")
					$(".vipPage_row_confirm_coupon_table>li").eq($(this).index()).show().siblings().hide()

				})

				$("#buynow").click(function() {
					alert("购买成功")
				})

			})
		</script>

	</body>

</html>